<template>
  <div class="check-all">
    <div class="form-box">
      <mu-flex align-items="center" class="form-line">
        <span class="form-line-item">审核状态：</span>
        <mu-radio v-model="form.status" class="form-line-item" value="all" label="不限"></mu-radio>
        <mu-radio v-model="form.status" class="form-line-item" value="none" label="未审核"></mu-radio>
        <mu-radio v-model="form.status" class="form-line-item" value="pass" label="已通过"></mu-radio>
        <mu-radio v-model="form.status" class="form-line-item" value="fail" label="不通过"></mu-radio>
      </mu-flex>
    </div>
    <question-page ref="pager" :fetcher="fetchQuestions" @click-row="toCheckQuestion"></question-page>
  </div>
</template>

<script>
import QuestionPage from '@/components/QuestionPage'
import api from '@/api'

export default {
  name: 'CheckAll',
  components: {
    QuestionPage
  },
  data() {
    return {
      form: {
        status: 'none'
      }
    }
  },
  watch: {
    form: {
      deep: true,
      handler(val) {
        this.$refs.pager.refresh()
      }
    }
  },
  methods: {
    fetchQuestions(page) {
      const statusMap = {
        all: null,
        none: 0,
        pass: 1,
        fail: 2
      }
      return api.queryQuestions({ status: statusMap[this.form.status], style: null, content: null, is_me: null }, page)
    },
    toCheckQuestion({ id }) {
      this.$router.push({
        name: 'check-question',
        params: {
          id
        }
      })
    }
  }
}
</script>

<style scoped>
.form-box {
  padding: 16px;
}
.form-line {
  padding-bottom: 8px;
}
.form-line-item {
  margin-right: 16px;
}
</style>
